<template>
  <div>
    <!--工具类-->

    <Row style="text-align: left">
      <i-col span="24" style="text-align: right">
        <Button  icon="trash-b" class="y_condition" @click="clearAction">清理操作记录</Button>
      </i-col>
      <divider/>
      <i-col span="24" class-name="y_query_right">
      <Input v-model.trim="searchParams.userName" placeholder="请输入员工名称" class="y_condition" clearable></Input>
      <span >查询的时间范围:
        <DatePicker type="datetime" v-model="searchParams.startTime" format="yyyy-MM-dd HH:mm" class="y_condition"></DatePicker> -
        <DatePicker type="datetime" v-model="searchParams.endTime" format="yyyy-MM-dd HH:mm" class="y_condition" ></DatePicker>
      </span>
      <Button type="primary" class="y_condition"@click="search" icon="search">查询</Button>

      </i-col>

    </Row>

    <!--表格和分页-->
<!--    <Table stripe border :context="this" :columns="tableTitles" :data="historyList" class="table_css"-->
<!--           no-data-text="暂无数据" ></Table>-->
    <List size="small" border style="margin:0.5rem;text-align: left">
      <div v-if="historyList==null || historyList.length==0">
        <ListItem>
          <div style="width: 100%; text-align: center;">暂无数据</div>
        </ListItem>
      </div>
      <div v-else>
        <ListItem v-for="(item,index) in historyList" class="item_hover">
          <i-col flex="auto">
            <KeyValueView title="序号">{{index+1}}</KeyValueView>
            <KeyValueView title="用户名"  >
              <span>{{item.userName}}</span>
            </KeyValueView>
            <KeyValueView title="操作时间"  >
              <span v-text="$tiyBJTime(item.createtime)"></span>
            </KeyValueView>
            <KeyValueView title="操作详情" oneline >
              {{item.details}}
            </KeyValueView>

          </i-col>

        </ListItem>
      </div>
      </List>



    <div style="float: right;">
      <Page :total="tPage.total" :page-size="tPage.stepNumber" :current="tPage.currentPage" @on-change="changePage" @on-page-size-change="sizeChange"
            show-sizer show-elevator/>
    </div>
    <!--删除确认弹出框-->
    <Modal
      v-model="status.modalClear.isShow"
      title="确认清除"
      :loading="status.modalClear.isLoading"
      @on-ok="clear">
      <p>确认清除操作记录?</p>
    </Modal>
  </div>

</template>

<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import tiyData from "./js/history/history_data"
  import { init,webClearOperationRecord, webList} from "./js/history/history_funs"
  import Icon from "../../../node_modules/view-design/src/components/icon/icon";
  import KeyValueView from "../widgets/KeyValueView";

  export default {
    //components: {ICol},
    components: {
      ICol,
      Icon,
      KeyValueView},
    data(){
      return {
        tPage: tiyData.tPage,
        status: tiyData.tStatus,
        //搜索条件
        searchParams: tiyData.tParams,
        historyList: tiyData.tData.historyList,
        dateRange: tiyData.tData.dateRange,


      }
    }
    ,
    computed : {

    },
    methods: {

      search(){
        tiyData.tPage.currentPage = 1;
        webList(this, tiyData);
      },
      clearAction(){
        tiyData.tStatus.modalClear.isShow = true;
      },
      clear(){
        webClearOperationRecord(this, tiyData);
      },
      changePage(page){
        tiyData.tPage.currentPage = page;
        webList(this, tiyData);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        webList(this, tiyData);
      },
      chooseDate(date){
        tiyData.tParams.startEndDate = date;
      }

    },
    mounted(){
      init(this, tiyData);
      // webList(this, tiyData);
    }
  }
</script>

<!--css样式-->
<style scoped lang="less">
  @import  (once,optional)  "../css/base";
  .table_css {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .modal_newuser_form {
    padding-left: 60px;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .modal_newuser_form_input {
    width: 180px;
    margin-right: 10px;
  }
</style>
